<template>
  <section class="w-1200 mauto">
    <article class="slide-box">
      <el-carousel indicator-position="inside" height="300px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src='https://cos.sdwanyue.com/admin/20210806/5121708e526b99d4e59ca46cc904c4f3.png'/>
        </el-carousel-item>
      </el-carousel>
    </article>
    <div class="special-area">
      <div>特价低卖</div>
      <div style="margin:10px 10px 0">每日上新</div>
      <div>美妆专区</div>
    </div>
    <IndexList :data="indexListData" />
    <IndexList :data="indexFreeData" />
  </section>
</template>
<script>
import IndexList from "./components/home-list.vue";
import goods from "@/sheep/api/goods";
export default {
  data() {
    return {
      indexListData: {
        name: "今日爆品",
        list: [
          {
            classImg:
              "https://cos.sdwanyue.com/admin/20210806/c97babd6d2bbcd31a69c5281c086b18c.png",
            className: "英语复习计划",
            classPrice: "252.65 ￥",
            teacher: "随时随地",
            avatar:
              "https://cos.sdwanyue.com/admin/20231024/1c102169451b7ba1dadf.jpg",
            classTime: "2课时",
            link: "asdsad",
          },
        ],
        icon: "https://edu.sdwanyue.com/static/student/images/v2/index/title_left_3.png",
        moreLink: "ssss",
      },
      indexFreeData: {
        name: "为你推荐",
        list: [
          {
            classImg:
              "https://cos.sdwanyue.com/admin/20210806/c97babd6d2bbcd31a69c5281c086b18c.png",
            className: "英语复习计划",
            classPrice: "252.65 ￥",
            teacher: "随时随地",
            avatar:
              "https://cos.sdwanyue.com/admin/20231024/1c102169451b7ba1dadf.jpg",
            classTime: "2课时",
            link: "asdsad",
          },
          {
            classImg:
              "https://cos.sdwanyue.com/admin/20210806/c97babd6d2bbcd31a69c5281c086b18c.png",
            className: "英语复习计划",
            classPrice: "252.65 ￥",
            teacher: "随时随地",
            avatar:
              "https://cos.sdwanyue.com/admin/20231024/1c102169451b7ba1dadf.jpg",
            classTime: "2课时",
            link: "asdsad",
          },
          {
            classImg:
              "https://cos.sdwanyue.com/admin/20210806/c97babd6d2bbcd31a69c5281c086b18c.png",
            className: "英语复习计划",
            classPrice: "252.65 ￥",
            teacher: "随时随地",
            avatar:
              "https://cos.sdwanyue.com/admin/20231024/1c102169451b7ba1dadf.jpg",
            classTime: "2课时",
            link: "asdsad",
          },
          {
            classImg:
              "https://cos.sdwanyue.com/admin/20210806/c97babd6d2bbcd31a69c5281c086b18c.png",
            className: "英语复习计划",
            classPrice: "252.65 ￥",
            teacher: "随时随地",
            avatar:
              "https://cos.sdwanyue.com/admin/20231024/1c102169451b7ba1dadf.jpg",
            classTime: "2课时",
            link: "asdsad",
          },
        ],
        icon: "https://edu.sdwanyue.com/static/student/images/v2/index/title_left_3.png",
        moreLink: "ssss",
      },
    };
  },
  components: {
    IndexList,
  },
  methods: {
    setHotGood(list) {
      list.forEach((item) => {
        item.classImg = "https://qwzs.jhpress.com/" + item.image;
        item.classPrice = item.original_price;
        item.className = item.title;
        item.teacher = "已售出：" + item.sales;
      });
      return list;
    },
    async todayHotGood() {
      const params = {
        ids: [42, 41, 40, 39, 38, 37].join(","),
      };
      const res = await goods.ids(params);
      if (res.code == 1) {
        this.indexListData.list = this.setHotGood(res.data);
      }
    },
    async recmondMethod() {
      const params = {
        ids: [33, 35].join(","),
      };
      const res = await goods.ids(params);
      if (res.code == 1) {
        this.indexFreeData.list = this.setHotGood(res.data);
      }
    },
  },
  async mounted() {
    this.todayHotGood();
    this.recmondMethod();
  },
};
</script>
<style scoped>
.special-area {
  display: flex;
}
.special-area div {
  flex: 1;
  text-align: center;
  line-height: 100px;
  margin: 10px 0;
  background: #2587ec;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px #ddd;
  height: 100px;
}
.slide-box{
  position: relative;
  height: 300px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.slide-box img{
  width: 100%;
  height: 300px;
}
</style>
